import React, { FC, useState, useEffect } from 'react'
import { Button, Divider } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import ProductionVoucher from '~/components/production-voucher'
import { queryCuratorCastItems } from '~/api/accept-property-api'
import { handleStorage, querySelfStorageCastItems } from '~/api/property-management-api'
import SuccessModal from '~/components/submit-successfully'
import { getUserInfo } from '~/mock/user/userinfo'

import { FooterAction } from './styled'
import MovedList from './container/moved-list'
import PropertySelect from './components/property-involved-select'
import TopHeader, { ListTitle } from '~/components/top-header'

const PropertyInvolved: FC = () => {
  const { state }: any = useLocation()
  const navigate = useNavigate()
  const [selectVisible, setSelectVisible] = useState(false)
  const [successVisible, setSuccessVisible] = useState(false)
  const [certificateVisible, setCertificateVisible] = useState(false)
  const [castItems, setCastItems] = useState([])
  const [selectedItems, setSelectedItems] = useState([])
  const { batchNo, caseName, caseNo, caseCompanyName, caseDepartmentName, caseState, itemOptType } = state

  const handleGetCastItems = async (value?: any) => {
    if (caseState === 1) {
      const { data } = await querySelfStorageCastItems({
        ...value,
        caseNo
      })
      setCastItems(data)
    } else {
      const { data } = await queryCuratorCastItems({
        ...value,
        batchNo,
        itemOptType
      })
      setCastItems(data)
    }
  }

  const handleCertificate = async (preview?: boolean) => {
    const userInfo = getUserInfo()
    const { data } = await handleStorage({
      ...userInfo,

      batchNo,
      caseName,
      caseNo,
      preview: !!preview,
      serialNos: selectedItems.map((item: any) => item.serialNo)
    })
    window.open(data.url)
    if (preview) return
    setSuccessVisible(true)
  }

  useEffect(() => {
    handleGetCastItems()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const headData = [
    {
      childen: [
        {
          label: '案件编号:',
          value: caseNo
        },
        { label: '案件名称:', value: caseName }
      ]
    },
    {
      childen:
        caseState === 1
          ? [
              { label: '办案单位:', value: caseCompanyName },
              { label: '办案部门:', value: caseDepartmentName }
            ]
          : []
    }
  ]

  console.log('selectedItems123', selectedItems)

  return (
    <div>
      <TopHeader headData={headData} />
      <ListTitle />
      <Divider />
      <main style={{ marginTop: 21 }}>
        <MovedList handleGetCastItems={handleGetCastItems} castItems={castItems} />

        <FooterAction>
          <div>
            {caseState !== 1 ? (
              <Button
                onClick={() => {
                  navigate(-1)
                }}
              >
                返回
              </Button>
            ) : (
              <>
                <Button
                  onClick={() => {
                    navigate(-1)
                  }}
                >
                  返回
                </Button>
                <Button onClick={() => handleCertificate(true)} style={{ marginLeft: 8 }}>
                  预览自行保管凭证
                </Button>
                <Button
                  onClick={() => {
                    handleCertificate()
                  }}
                  style={{ marginLeft: 8 }}
                  type="primary"
                >
                  制作自行保管凭证
                </Button>
              </>
            )}
          </div>
        </FooterAction>
      </main>
      <SuccessModal visible={successVisible} />
      <PropertySelect
        setSelectedItems={setSelectedItems}
        castItems={castItems}
        setSelectVisible={setSelectVisible}
        visible={selectVisible}
        selectedItems={selectedItems}
        handleGetCastItems={handleGetCastItems}
      />
      <ProductionVoucher
        onOk={() => {
          setCertificateVisible(false)
        }}
        onCancel={() => {
          setCertificateVisible(false)
        }}
        visible={certificateVisible}
      />
    </div>
  )
}

export default PropertyInvolved
